<template>
  <el-table
    v-if="adminInfo.identityType === 1"
    :data="userList"
    style="width: 100%;">
    <el-table-column
      label="注册日期"
      width="220;">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.dateline }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="用户类型"
      width="220;">
      <template slot-scope="scope">
        <el-tag type="success" v-if="scope.row.identityType == 1" style="margin-left: 10px">超级管理员</el-tag>
        <el-tag type="success" v-if="scope.row.identityType == 2" style="margin-left: 10px">管理员</el-tag>
        <el-tag type="success" v-if="scope.row.identityType == 3" style="margin-left: 10px">普通用户</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="用户昵称"
      width="300;">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>用户ID: {{ scope.row.sysUserId }}</p>
          <p>昵称: {{ scope.row.username }}</p>
          <p>联系方式: {{ scope.row.mobile }}</p>
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.username }}</span>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作权限">
      <template slot-scope="scope">
        <el-button
          v-if="scope.row.identityType == 3"
          size="mini"
          @click="handleEdit(scope.$index, scope.row.sysUserId)">开启管理员</el-button>
        <el-button
          v-if="scope.row.identityType == 2"
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row.sysUserId)">关闭管理员</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div v-else style="padding: 30px">您暂无权限浏览！</div>
</template>

<script>
import headTop from "../components/headTop";
import { mapGetters } from 'vuex'
import { sysUserList, settingIdentityType } from "@/api/getData";

export default {
  data() {
    return {
      userList: []
    };
  },
  components: {
    headTop
  },
  computed: {
    ...mapGetters([
      'adminInfo'
    ])
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      try {
        const parms = { p: 1, size: 50 };
        const { data } = await sysUserList(parms);
        this.userList = data.data;
      } catch (error) {
        console.log(error);
      }
    },
    async handleEdit(index, row) {
      const { data } = await settingIdentityType({ sysUserId: row, identityType: 2 })
      await this.initData();
    },
    async handleDelete(index, row) {
      const { data } = await settingIdentityType({ sysUserId: row, identityType: 3 })
      await this.initData();
    }
  }
};
</script>

<style lang="less">
@import "../style/mixin";
.cell {
  text-align: center;
}

</style>
